@import '../../style/themes/index.less';

@spin-prefix-cls: ~'@{prefix}-spin';

.@{spin-prefix-cls}-nested {
  position: relative;

  .@{spin-prefix-cls} {
    font-family: Monospaced Number, Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC,
      Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: @text-size;
    line-height: 1.5;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    color: @primary-color;
    vertical-align: middle;
    text-align: center;
    opacity: 0;
    position: absolute;
    transition: all 0.25s cubic-bezier(0.78, 0.14, 0.15, 0.86);
    visibility: hidden;
    pointer-events: none;

    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 4;
  }

  .@{spin-prefix-cls}-text {
    padding-top: 20px;
    text-shadow: 0 2px 4px #fff;
    color: @primary-color;
  }
}

.@{spin-prefix-cls} {
  &-text {
    margin: 0;
  }

  &-indicator {
    font-size: @text-size * 2;
    color: @primary-color;
  }

  &-indicator-spin {
    transform: rotate(45deg);
    animation: spin-rotate 1.2s infinite linear;
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;

    i {
      width: 26px;
      height: 26px;
      border-radius: 100%;
      background-color: @primary-color;
      transform: scale(0.75);
      display: block;
      position: absolute;
      opacity: 0.3;
      animation: spin-opacityMove 1s infinite linear alternate;
      transform-origin: 50% 50%;

      &:first-child {
        left: 0;
        top: 0;
      }

      &:nth-child(2) {
        right: 0;
        top: 0;
        animation-delay: 0.4s;
      }

      &:nth-child(3) {
        right: 0;
        bottom: 0;
        animation-delay: 0.8s;
      }

      &:nth-child(4) {
        left: 0;
        bottom: 0;
        animation-delay: 1.2s;
      }
    }
  }

  &-container {
    position: relative;
    zoom: 1;

    &:before {
      box-sizing: border-box;
      content: '';
      display: table;
    }

    &:after {
      box-sizing: border-box;
      content: '';
      display: table;
      clear: both;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: #fff;
      opacity: 0.3;
      transition: all 0.3s;
      z-index: 10;
    }
  }

  // 加载中
  &&-spinning {
    opacity: 1;
    position: static;
    display: inline-block;
    visibility: visible;
    pointer-events: auto;
  }

  &-nested.spinning {
    .@{spin-prefix-cls} {
      position: absolute;
      height: 100%;
      width: 100%;
      z-index: 4;
      display: flex;
    }
    .@{spin-prefix-cls}-container {
      pointer-events: none;
      user-select: none;
      overflow: hidden;
      opacity: 0.7;
      -webkit-filter: blur(0.5px);
      filter: blur(0.5px);
      // -webkit-filter: progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false);
      // filter: progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false);
    }
  }

  // 显示文本
  &-show-text {
    .@{spin-prefix-cls}-indicator-spin {
      margin-top: -40px;
    }
  }

  // 内联模式
  &-nested.inline {
    display: inline-block;

    .@{spin-prefix-cls}-container {
      display: inline-block;
    }
  }

  // 不同尺寸
  &-size-small {
    .@{spin-prefix-cls}-indicator {
      font-size: @text-size * 1.5;
    }

    .@{spin-prefix-cls}-indicator-spin {
      width: 46px;
      height: 46px;

      i {
        width: 24px;
        height: 24px;
      }
    }
  }

  &-size-large {
    .@{spin-prefix-cls}-indicator {
      font-size: @text-size * 4;
    }

    .@{spin-prefix-cls}-indicator-spin {
      width: 78px;
      height: 78px;

      i {
        width: 32px;
        height: 32px;
      }
    }
  }
}

@keyframes spin-rotate {
  to {
    transform: rotate(405deg);
  }
}
@keyframes spin-opacityMove {
  to {
    opacity: 1;
  }
}
